<template>
  <view class="home-page">
    <!-- <view class="logo">
      <image src="@/assets/imgs/logo.jpeg" mode="aspectFill" class="logo-img"></image>
      <text class="logo-text">共运大道</text>
    </view> -->

    <view class="logo">
      <image src="@/assets/pic/top.png" mode="widthFix" class="logo-img"></image>
      <input type="text" placeholder="请输入搜索内容" class="logo-input" />
    </view>

    <view class="home">

      <!-- <myInput v-model="searchTxt" @search="handleSearch" /> -->

      <!-- <swiper
        :autoplay="true"
        :circular="true"
        :interval="3000"
        pagination-visible
        pagination-color="#426543"
        pagination-unselected-color="#808080"
        class="swiper-container"
      >
        <swiper-item
          v-for="(item, index) in pics"
          :key="index"
          class="swiper-item"
        >
          <image
            :src="item"
            mode="aspectFill"
            class="swiper-image"
            lazy-load
            show-menu-by-longpress
          />
        </swiper-item>
      </swiper> -->

      <!-- 顶部进度条 -->
      <view class="progress-bar">
        <view class="progress-item" v-for="(item, index) in progressList" :key="index" @tap="handleFeatureClick(item)">
          <view class="progress-item-img">
            <image :src="item.imgUrl || pic" class="imgic" mode="aspectFit"></image>
          </view>

          <text class="title">{{ item.name }}</text>
        </view>
      </view>


      <view class="big-title">
        <image src="@/assets/pic/ico.png" mode="widthFix" class="big-title-img1"></image>
        <text class="big-title-text">会员权益升级</text>
        <image src="@/assets/pic/ico.png" mode="widthFix" class="big-title-img2"></image>
      </view>

      <image src="@/assets/pic/mid.png" mode="widthFix" class="wid-img"></image>

      <view class="big-title">
        <image src="@/assets/pic/ico.png" mode="widthFix" class="big-title-img1"></image>
        <text class="big-title-text">爆品推荐</text>
        <image src="@/assets/pic/ico.png" mode="widthFix" class="big-title-img2"></image>
      </view>

      <view class="case-more">
        <!-- <view
          class="case-box"
          v-for="(item, index) in caseList"
          :key="index"
          @tap="goDetail(item)"
        >
          <image class="case-img" :src="item.image" mode="aspectFill"></image>
          <text class="acct">{{ item.account_type }}券</text>
          <view class="p-title">{{ item.name }}</view>
          <view class="p-price">￥{{ item.price }}</view>
        </view> -->
        <Good :product-data="item" @buy="goDetail" v-for="(item, index) in caseList" :key="index" />
      </view>

      <view class="big-title">
        <image src="@/assets/pic/ico.png" mode="widthFix" class="big-title-img1"></image>
        <text class="big-title-text">尊享服务</text>
        <image src="@/assets/pic/ico.png" mode="widthFix" class="big-title-img2"></image>
      </view>

      <image src="@/assets/pic/store.png" mode="widthFix" class="wid-img"></image>

      <image src="@/assets/pic/line.png" mode="widthFix" class="wid-img"></image>
    </view>
  </view>
</template>

<script lang="ts" setup>
import BasicLayout from "@/layouts/basic-layout.vue";
import { onMounted, ref } from "vue";
// const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
import Taro, { useShareAppMessage, useShareTimeline } from "@tarojs/taro";

import { Search2 } from "@nutui/icons-vue-taro";
import myInput from "@/components/my-input/index.vue";
import http from "@/utils/http";

import lihe from "@/assets/pic/lihe.svg";
import shangdian from "@/assets/pic/shangdian.svg";
import lingxing from "@/assets/pic/lingxing.svg";
import lingdang from "@/assets/pic/lingdang.svg";

import Good from "./good.vue";
const searchTxt = ref("");


// const pic = ref(photo);

Taro.setNavigationBarTitle({
  title: "首页",
});

// 使用全局分享配置，页面级别的分享方法可以移除，因为app.ts已经配置了全局分享
// Taro.showShareMenu({
//   menus: ['shareAppMessage', 'shareTimeline']
// } as any);


// onMounted(() => {
  
// })
// Taro.showShareMenu({
//       withShareTicket: true,
//       menus: ['shareAppMessage', 'shareTimeline']
// })

// useShareAppMessage(() =>{
//   console.log('11')
//     return {
// 	      title: '',
// 	      query: '',
// 	      imageUrl: ''
// 	    }
// }),

//   useShareTimeline(() => {
//       return {
//         title: '',
//         query: '',
//         imageUrl: ''
//       }
//   })
  

// // 分享朋友
// useShareAppMessage(res => {
//   return {
//     title: "森链智选",
//     path: "/pages/home/index", // 路由路径
//     imageUrl: "https://docs.taro.zone/img/logo-taro.png"
//   };
// }),

// useShareTimeline(() => {
//   return {
//     title: "森链智选",
//     path: "/pages/home/index", // 路由路径
//     imageUrl: "https://docs.taro.zone/img/logo-taro.png"
//   };
// })
const progressList = ref([
  { name: "品牌介绍", imgUrl: lingxing, id: 1 },
  { name: "活动公告", imgUrl: lingdang, id: 2 },
  { name: "经销网点", imgUrl: shangdian, id: 3 },
  { name: "积分换购", imgUrl: lihe, id: 4 },
]);



const pics = ref([]);

const upper = (e) => {
  console.log("upper:", e);
};

const lower = (e) => {
  console.log("lower:", e);
};

const onMoreView = () => {
  Taro.navigateTo({
    url: "/pages/test/test",
  });
};



Taro.usePullDownRefresh(() => {
  flash();
  setTimeout(() => {
    Taro.stopPullDownRefresh();
  }, 1000);
});

function flash() {
  http.post(`/api/mallIndex/banner`).then((res) => {
    console.log("res 轮播图", res);
    pics.value = res.data.map(i => i.columns.imgUrl);
  });

  // http.post(`/api/mallIndex/goodsType`).then((res) => {
  //   console.log("res 商品类型", res);
  //   progressList.value = res.data.map((i) => i.columns);
  // });

  // http.post(`/api/mallIndex/recommend`).then((res) => {
  //   console.log("res 推荐的商品", res);
  //   caseList.value = res.data.map((i) => i.columns);
  //   caseList.value.forEach((item) => {
  //     item.image = item.imgsUrl.split(",").pop();
  //   });
  // });
}

onMounted(() => {
  flash();
});


// 案例展示数据
const caseList = ref([
  {
    title: '蓝月亮洗衣液亮白增艳薰衣草洗衣液补护肤增艳 瓶装',
    badges: ['运费险', '7天无理由', '满198减30'],
    sales: 348,
    currentPrice: 98,
    originalPrice: 128,
    image: 'http://www.dzgktf.com/templets/default/images/wtyt.jpg'
  }
]);

// 功能点击处理
const handleFeatureClick = (item: any) => {
  console.log("点击功能：", item.title);
  Taro.navigateTo({
    url: `/pages-detail/cate/list-view?id=${item.id}`,
    // url: `/pages/cate/index?id=${item.id}`,
  });
};

const handleSearch = (value: string | number) => {
  console.log("搜索值：", value);
  // 执行搜索逻辑
};

const goDetail = (item) => {
  Taro.navigateTo({
    url: "/pages-detail/detail/index?id=" + item.id,
  });
};

const onTest = () => {
  Taro.navigateTo({
    url: "/pages-detail/addr/index",
  });
};
</script>

<style lang="scss">
.wid-img {
  width: 100%;
}

.big-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40rpx 0 20rpx 0;

  .big-title-text {
    position: relative;
    font-size: 36rpx;
    color: var(--main-color);
    z-index: 2;
  }

  .big-title-img1 {
    width: 30rpx;
    height: 30rpx;
    transform: translate(10rpx, -20rpx);
  }

  .big-title-img2 {
    width: 30rpx;
    height: 30rpx;
    transform: translate(-10rpx, 0);
  }
}

.logo {
  width: 100%;

  .logo-img {
    width: 100%;
    position: relative;
  }

  .logo-input {
    position: absolute;
    top: 100rpx;
    left: 0;
    right: 0;
    margin: auto;
    width: 600rpx;
    padding: 20rpx 40rpx;
    border-radius: 40rpx;
    background-color: #fff;
    z-index: 10;
  }
}

.home-page {
  padding-bottom: 40rpx;

  .acct {
    font-size: 24rpx;
    background: #008000;
    color: #fff;
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    padding: 4rpx 10rpx;
    border-radius: 4rpx;
  }
}

.home {
  width: 700rpx;
  margin: auto;
  height: 100%;
}

.ico {
  width: 30rpx;
  height: 30rpx;
  margin-right: 12rpx;
}

.tops {
  width: 100%;
  height: 300rpx;
}

.img1 {
  width: 80rpx;
  height: 80rpx;
}

.img2 {
  width: 120rpx;
  height: 120rpx;
}

.progress-bar {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  // border-radius: 16rpx;
  margin: 32rpx 0;

  padding-bottom: 8rpx;

  .progress-item {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

    // flex: 1;
    // box-shadow: 0 0 10rpx #99999983;
    // border-radius: 8rpx;
    // position: relative;
    .progress-item-img {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 10rpx;
      background-color: #2ca6e3;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .imgic {
      width: 50%;
      height: 50%;
    }

    .title {
      font-size: 24rpx;
      color: #333;
      padding: 8rpx;
    }
  }
}

.feature-section {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 32rpx;

  .section-title {
    margin-bottom: 32rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32rpx;

    .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32rpx;
      background-color: #f8f8f8;
      border-radius: 16rpx;

      text {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.case-more {
  display: flex;
  width: 100%;
  gap: 36rpx;
  flex-wrap: wrap;

  .case-box {
    box-shadow: 0 0 10rpx #99999968;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 8rpx;
    position: relative;

    .case-img {
      width: 100%;
      height: 400rpx;
      border-radius: 8rpx;
      background: #eee;
    }

    .p-title {
      font-size: 24rpx;
      color: #333;
      margin-top: 4rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      padding: 4rpx 16rpx;
    }

    .p-price {
      font-size: 24rpx;
      color: #ff0000;
      margin-top: 4rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      // padding: 4rpx;
      padding: 8rpx 16rpx;
    }
  }
}

.case-section {
  background-color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;

  .section-title {
    margin-bottom: 32rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }

  .case-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32rpx;

    .case-item {
      image {
        width: 100%;
        height: 240rpx;
        border-radius: 16rpx;
        margin-bottom: 16rpx;
      }

      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.big {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40rpx 0 30rpx 0;
  padding: 0 16rpx;
  position: relative;

  text {
    font-size: 32rpx;
    color: #2c3e50;
    font-weight: 600;
    position: relative;
    padding-left: 20rpx;

    &::before {
      content: '';
      position: absolute;
      left: -10rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 28rpx;
      background: linear-gradient(135deg, #426543, #5a7c5a);
      border-radius: 3rpx;
    }

    // &::after {
    //   content: '';
    //   position: absolute;
    //   left: 0;
    //   bottom: -6rpx;
    //   width: 60rpx;
    //   height: 3rpx;
    //   background: linear-gradient(135deg, #426543, #5a7c5a);
    //   border-radius: 2rpx;
    //   opacity: 0.6;
    // }
  }
}

.swp {
  width: 100%;
  height: 300rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.swiper-container {
  width: 100%;
  height: 300rpx;
  /* 统一使用 rpx 单位 */
  // border-radius: 16rpx;
  overflow: hidden;

  .swiper-item {
    width: 100%;
    height: 100%;

    .swiper-image {
      width: 100%;
      height: 100%;
      display: block;
      will-change: transform;
      /* 提升动画性能 */
    }
  }

  /* 修复分页器位置 */
  .nut-swiper-pagination {
    bottom: 20rpx !important;

    .nut-swiper-pagination-item {
      width: 16rpx;
      height: 16rpx;
      margin: 0 8rpx;
    }
  }
}
</style>
